<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  CaretBottom,
  Plus,
  Select,
  CircleClose,
} from "@element-plus/icons-vue";
import OrderTable from "./table.vue";

const props = withDefaults(
  defineProps<{
    activeMenu: string;
  }>(),
  {
    activeMenu: "1",
  }
);
const dynamicValidateForm = reactive<{
  domains: DomainItem[];
}>({
  domains: [
    {
      key: 1,
      value: "",
      type: "1",
      textarea: "",
      textareaShow: false,
    },
  ],
});

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: "",
    type: "",
    textarea: "",
    textareaShow: false,
  });
};

const onSubmit = () => {
  console.log(dynamicValidateForm);
};

interface DomainItem {
  key: number;
  value: string;
  type: string;
  textarea: string;
  textareaShow: boolean;
}

const menuMap = {
  "1": "待发货",
  "2": "待打包",
  "3": "已发货",
  "4": "待审核",
  "5": "异常订单",
  "6": "已退款",
  "7": "已归档",
};
const inputPlaceholderMap = {
  "1": "支持最多200个订单号，例如：", // 订单号
  "2": "支持最多200个SKU编码，例如：", // SKU编码
  "3": "请输入产品名称", // 产品名称
  "4": "请输入产品属性", // 属性
  "5": "请输入收件人", // 收件人
};
const textareaPlaceholderMap = {
  "1": `支持最多200个订单号，例如：
1001003
1001004
1001005`, // 订单号
  "2": `支持最多200个SKU编码，例如：
TH001-Purple-S
F0001-Blue-XL
MT001-3M`, // SKU编码
};

const domainInputPlaceholder = (domain) => {
  return inputPlaceholderMap[domain.type];
};
const inputClear = (domain) => {
  domain.value = "";
  domain.textarea = "";
};

const VFocus = {
  updated(el, { value }) {
    value ? el.children[0].focus() : el.children[0].blur();
  },
};
const textarea = ref("");
const domainBlur = (domain) => {
  domain.textareaShow = false;
  domain.value = domain.textarea.split("\n")[0];
};
const selectChange = (domain) => {
  domain.value = "";
  domain.textarea = "";
};
</script>

<template>
  <el-scrollbar>
    <div class="main-title">{{ menuMap[activeMenu] }}</div>
    <el-form
      :inline="true"
      :model="dynamicValidateForm"
      class="main-search-form"
      style="--el-border-radius-base: 0px; --el-fill-color-light: #fff"
    >
      <el-form-item
        show-label="false"
        v-for="(domain, index) in dynamicValidateForm.domains"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
      >
        <el-input
          v-model="domain.value"
          style="width: 440px"
          :placeholder="domainInputPlaceholder(domain)"
          clearable
          class="main-search__input"
          @focus="domain.textareaShow = true"
          @clear="inputClear(domain)"
          :disabled="!domain.type"
        >
          <template #prepend>
            <el-select
              v-model="domain.type"
              placeholder="请选择"
              style="width: 120px"
              :suffix-icon="CaretBottom"
              popper-class="main__search-input__select"
              @change="selectChange(domain)"
            >
              <el-option label="订单号" value="1">
                <div class="main__search-input--option">
                  订单号
                  <el-icon size="8" v-if="domain.type === '1'">
                    <Select color="#4A4C56" />
                  </el-icon>
                </div>
              </el-option>
              <el-option label="SKU编码" value="2">
                <div class="main__search-input--option">
                  SKU编码
                  <el-icon size="8" v-if="domain.type === '2'">
                    <Select color="#4A4C56" />
                  </el-icon>
                </div>
              </el-option>
              <el-option label="产品名称" value="3">
                <div class="main__search-input--option">
                  产品名称
                  <el-icon size="8" v-if="domain.type === '3'">
                    <Select color="#4A4C56" />
                  </el-icon>
                </div>
              </el-option>
              <el-option label="属性" value="4">
                <div class="main__search-input--option">
                  属性
                  <el-icon size="8" v-if="domain.type === '4'">
                    <Select color="#4A4C56" />
                  </el-icon>
                </div>
              </el-option>
              <el-option label="收件人" value="5">
                <div class="main__search-input--option">
                  收件人
                  <el-icon size="8" v-if="domain.type === '5'">
                    <Select color="#4A4C56" />
                  </el-icon>
                </div>
              </el-option>
            </el-select>
          </template>
        </el-input>
        <div
          class="main-search__input--textarea"
          v-if="['1', '2'].includes(domain.type) && domain.textareaShow"
        >
          <el-input
            v-focus="true"
            v-model="domain.textarea"
            resize="none"
            :rows="16"
            type="textarea"
            :placeholder="textareaPlaceholderMap[domain.type]"
            @blur="domainBlur(domain)"
          />
          <el-icon
            class="circle-close"
            size="14"
            @mousedown="inputClear(domain)"
          >
            <CircleClose color="#CFD4DE" />
          </el-icon>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button class="search-btn" type="primary" @click="onSubmit"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-button
      style="
        --el-border-radius-base: 0px;
        --el-fill-color-light: #fff;
        --el-border: 1px dashed #dcdfe6;
      "
      class="add-btn"
      @click="addDomain"
    >
      <el-icon size="11" style="margin-right: 4px; color: #202738">
        <Plus></Plus>
      </el-icon>
      添加筛选项
    </el-button>

    <OrderTable class="main-order-table"></OrderTable>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.main-search__input {
  ::v-deep(.el-input__wrapper) {
    padding: 1px 15px;
  }
  ::v-deep(.el-input__inner) {
    &::placeholder {
      font-family: PingFang SC;
      font-size: 13px;
      font-weight: 400;
      line-height: 18.2px;
      text-align: left;
      color: #9ba3b5;
    }
  }
}
.main-search__input--textarea {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 320px;
  height: 340px;
  ::v-deep(.el-textarea__inner) {
    padding: 11px 15px;
    &::placeholder {
      font-family: PingFang SC;
      font-size: 13px;
      font-weight: 400;
      line-height: 18.2px;
      text-align: left;
      color: #9ba3b5;
    }
  }
  .circle-close {
    position: absolute;
    right: 15px;
    top: 13px;
    &:hover {
      cursor: pointer;
      svg {
        color: #919398;
      }
    }
  }
}

.main__search-input__select {
  .el-select-dropdown__item {
    padding: 9px 15px;
    font-family: PingFang SC;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: #40485f;
    &.is-hovering {
      background: #e4e7ec;
    }
  }
}
.main__search-input--option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-title {
  font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}
.main-search-form {
  margin-top: 20px;
  .el-form-item {
    margin-right: 10px;
  }
  & > :nth-last-child(2) {
    margin-right: 10px;
  }
  ::v-deep(.el-select__placeholder) {
    text-align: center;
    font-family: PingFang SC;
    font-size: 13px;
    font-weight: 400;
    line-height: 18.2px;
    color: #202738;
  }
  ::v-deep(.el-select__wrapper) {
    height: 40px;
  }
}
.search-btn {
  width: 66px;
  height: 40px;
  padding: 8px 20px 8px 20px;
  font-family: PingFang SC;
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
}
.add-btn {
  width: 96px;
  height: 30px;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: left;
  color: #091a4b;
}
.main-order-table {
  margin-top: 10px;
}
</style>
